import React from 'react';
import { ModalForm, ProFormSelect, ProFormTextArea } from '@ant-design/pro-form';

type EmployeeConfigFormProps = {
  employeeResult: any;
  configEmployeeModalVisible: boolean;
  handleConfigEmployeeModalVisible: any;
  onSubmit: (values: any) => Promise<void>;
  request: (params: any, options: any) => Promise<any>;
};

const EmployeeConfigForm: React.FC<EmployeeConfigFormProps> = (props) => {
  const {
    employeeResult,
    configEmployeeModalVisible,
    handleConfigEmployeeModalVisible,
    onSubmit,
    request,
  } = props;

  return (
    <ModalForm
      title="客服配置"
      width="600px"
      visible={configEmployeeModalVisible}
      onVisibleChange={handleConfigEmployeeModalVisible}
      onFinish={onSubmit}
      initialValues={{
        welcome_message: `❤️感谢选择北京众惠保❤️
        我是您的专属服务专员{***务必填写***}，你可以随时咨询投保指引、保单管理、理赔协助等问题，我们还有不定期福利送给投保用户哦。
        👉 点这里查看自己的保单{***务必填写***}
        👉 点这里领取家庭医生服务{***务必填写***}`,
      }}
      request={request}
      modalProps={{ destroyOnClose: true }}
    >
      <ProFormSelect
        name="employee_select"
        label="客服选择"
        valueEnum={() => employeeResult}
        fieldProps={{
          mode: 'multiple',
        }}
        placeholder="请选择所有服务此二维码的客服"
        rules={[{ required: true, message: '每个二维码至少配置一名客服!', type: 'array' }]}
      />

      <ProFormTextArea
        name="welcome_message"
        label="客服欢迎语"
        rules={[
          {
            required: true,
            message: '客服欢迎语不能为空',
          },
        ]}
      />
    </ModalForm>
  );
};

export default EmployeeConfigForm;
